<template>
  <div class="container">
    <!-- <el-table  :data="list.slice((currentPage-1)*pagesize, currentPage*pagesize)" fit highlight-current-row style="width: 100%"> -->
    <el-table id="exportTab" highlight-current-row style="width: 100%"  :data="checkList"  :header-cell-style="{background:'#EEF3FC',color:'#333333'}">
      <el-table-column
        label="序号"
        type="index"
        style="width: 8%"
        align="center">
      </el-table-column>
      <el-table-column style="width: 12%;background-color:red" align="center" label="机构名称">
        <template slot-scope="scope">
          <span>{{ scope.row.firmName }}</span>
        </template>
      </el-table-column>

      <el-table-column style="width: 12%" align="center" label="法定代表人">
        <template slot-scope="scope">
          <span>{{ scope.row.firmUser }}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="机构类型" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.firmType }}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="提交时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批人">
        <template slot-scope="scope">
          <span>{{ scope.row.resultUser }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">
        <template slot-scope="scope">
          <span>{{ scope.row.checkTime }}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isShow === 'W'" type="text" @click="open(scope.row)">原因</el-button>
          <i v-if="isShow === 'W'">|</i>
          <el-button type="text"  @click="urlDetailChange(scope.row)"  >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination-a" background layout="prev, pager, next" :total=list.length @current-change="current_change">
    </el-pagination>
    <!-- 原因弹窗 -->
    <resion :obj="obj" @handleClose="handleClose"></resion>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import resion from '@/components/resion/resion'
  export default {
      components: { resion },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    props: {
      checkList:{
        type:Array
      },
      type: {
        type: String,
        default: 'D'
      },
      activeName:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 获取机构入驻审核列表数据
        list: [],
        isShow:'D',
        listQuery: {
          page: 1,
          limit: 5,
          type: this.type,
          sort: '+id'
        },
        pagesize:10,
        currentPage:1,
        typeData:0,
        // 是否查看原因
        dialogVisible:false,
        // 查看原因数据
        resultContent:'',
        // 子组件的数据
        obj:{
          // 是否显示弹窗
          visible:false,
          // 具体原因
          resultSummary:'这里是原因'
        },
        tabbar:''
      }
    },
    created() {
    
    },
     // 监听路由
    watch: {
       $route: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log('监听执法路由获取传递过来的点击jigourushrzbe',val)
          if(val.query){
            this.isShow=val.query.tab
          }
        }
      }
    },
    methods: {
      // 隔行换色
      //  tableRowStyle({row, rowIndex}) {
      //     if (rowIndex % 2) {
      //         return {background: '#f5f5f5'}
      //     } else {
      //         return {background: '#ffffff'}
      //     }
      //   },
     
      // 机构入驻列表跳转事件
      // 详情跳转
      urlDetailChange(row){
        console.log('获取详情当前type',this.type)
        let id=''
        console.log('获取转转的ID',id)
        this.$router.push(
          { name: 'check-particulars',
           params: {id:this.type,firmId:row.firmId,} 
          }
        )
      },
         open(row) {
        console.log('获取原因',row)
         this.obj.resultSummary=row.resultContent
        this.obj.visible=true
      },
        // 原因弹窗关闭
      handleClose(data){
        console.log('获取子组件关闭',data)
        this.obj.visible=data
      },

      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
    }
  }
</script>
<style scoped lang='scss'>
.container{
  // 设置表格的每一个表格的高度
  /deep/.el-table td, .el-table th{
    padding: 4px 0;
  }
}

  .el-tabs__nav-wrap{
    width: 100% ;
    // border: 1px solid red;
  }
  #exportTab >th,#exportTab td{
    padding:0!important;
    height:20px;
    line-height:20px;
  }
</style>

